<template>
    <div>
        <section class="p-test">
            <walkingContainer
                v-if="isShow"
                ref="$circle"
                class="progress"
                :isAnimation="true"
                :isRound="true"
                :width="width"
                :radius="radius"
                :progress="progress"
                :barColor="barColor"
                :duration="duration"
                :delay="delay"
                :timeFunction="timeFunction"
                :backgroundColor="backgroundColor"
                :text1="text1"
                :text2="text2"
                :text3="text3"
                :text4="text4"
                :text5="text5"
                :text6="text6"
                :text7="text7"
                :text8="text8"
                :text9="text9"
                >
            </walkingContainer>
        </section>
        <div class="recommend">
            <Title :title="title"/>
            <List/>
        </div>
    </div>
</template>
<script>
import walkingContainer from "@/components/Shouye/WalkingComponent/walkingContainer"
import Title from "@/components/Shouye/WalkingComponent/Title"
import List from "@/components/Shouye/RunComponent/List"
export default {
    name:'Riding',
     components:{
        walkingContainer,
        Title,
        List
    },
     data(){
        return{
            isShow: true,
            width: 200,
            radius: 10,
            progress: 70,
            duration: 1000,
            delay: 20,
            barColor: '#Fddf05',
            backgroundColor: '#fff',
            timeFunction: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)',
            title:"周好友健走排名",
            text1:"骑行",
            text2:"0",
            text3:"公里",
            text4:"目标：10公里",
            text5:"大卡",
            text6:"0",
            text7:"用时",
            text8:"0",
            text9:"开始骑行"
        }
    },
    methods: {
        reset() {
            this.isShow = false
            this.$nextTick(() => {
                this.isShow = true
            })
        }
    }
}
</script>
<style lang="less" scoped>
.recommend{
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20px;
}    
</style>